<template>
<div>
  <div class="el-card" style="margin:20px 5%;">
    <img src="../../assets/diancan.webp"  style="width: 100%;height: 100%" alt="avatar" />
  </div>
  <form action="/">
    <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
    />
  </form>
  <van-tabs v-model="menuActive">
    <van-tab :title="item.dictionary.valueName" :name="item.dictionary.id" v-for="item in allmenus">
      <div style="padding-bottom: 60px">
        <van-card v-for="shop in item.menus"
                  :num="shop.stock"
                  :price="shop.price"
                  :desc="shop.introduction"
                  :title="shop.name"
                  :thumb="shop.img"
        >
          <template #footer>
            <van-button size="mini" v-if="shop.stock>0"  type="warning" @click="addCard(shop)">加入购物车</van-button>
          </template>
        </van-card>
      </div>
    </van-tab>
  </van-tabs>
</div>
</template>

<script>
import {doGetMenuByDic, doGetMenuByName, doGetMenus} from "@/api/menu";
import {doGetUseDic} from "@/api/dic";
export default {
  name: "menus",
  data(){
    return{
      menuActive:0,
      value: '',
      allmenus:''
    }
  },
  methods:{
    addCard(menu){
      let shop=deepClone2(menu)
      menu.stock--;
      shop.stock=1;
      this.$store.state.total+=shop.price;
      let card=this.$store.state.card;
      if (card!=null){
        for (let i = 0; i < card.length; i++) {
          if (shop.id === card[i].id){
            card[i].stock++;
            return;
          }
        }
      }
      card.push(shop);
    },
    onSearch(val) {
      doGetMenuByName(val).then(res=>{
        if (res.code===200){
          this.allmenus[0].menus=res.data;
        }
      })
    },
    onCancel() {

    }
  },
  mounted() {
    this.allmenus=this.$store.state.allMenus;
  }
}
function deepClone2(obj) {
  let _obj = JSON.stringify(obj);
  return JSON.parse(_obj);
}
</script>

<style lang="less" scoped>

</style>
